<template>
  <div class="communication-demo">
    <div class="page-header">
      <h2>组件通信示例</h2>
    </div>

    <!-- 1. Props & Events 父子通信 -->
    <div class="demo-section">
      <div class="section-header">
        <h3>1. Props & Events 父子通信</h3>
      </div>
      <div class="demo-content">
        <parent-child-demo />
      </div>
    </div>

    <!-- 2. EventBus 跨组件通信 -->
    <div class="demo-section">
      <div class="section-header">
        <h3>2. EventBus 跨组件通信</h3>
      </div>
      <div class="demo-content">
        <event-bus-demo />
      </div>
    </div>

    <!-- 3. Vuex 状态管理 -->
    <div class="demo-section">
      <div class="section-header">
        <h3>3. Vuex 状态管理</h3>
      </div>
      <div class="demo-content">
        <vuex-demo />
      </div>
    </div>

    <!-- 4. Provide/Inject 依赖注入 -->
    <div class="demo-section">
      <div class="section-header">
        <h3>4. Provide/Inject 依赖注入</h3>
      </div>
      <div class="demo-content">
        <provide-inject-demo />
      </div>
    </div>

    <!-- 5. $refs 直接访问 -->
    <div class="demo-section">
      <div class="section-header">
        <h3>5. $refs 直接访问</h3>
      </div>
      <div class="demo-content">
        <refs-demo />
      </div>
    </div>
  </div>
</template>

<script>
import ParentChildDemo from './communication/ParentChildDemo.vue'
import EventBusDemo from './communication/EventBusDemo.vue'
import VuexDemo from './communication/VuexDemo.vue'
import ProvideInjectDemo from './communication/ProvideInjectDemo.vue'
import RefsDemo from './communication/RefsDemo.vue'

export default {
  name: 'ComponentCommunication',
  components: {
    ParentChildDemo,
    EventBusDemo,
    VuexDemo,
    ProvideInjectDemo,
    RefsDemo
  }
}
</script>

<style scoped>
.communication-demo {
  padding: 20px;
  height: calc(100vh - 40px); /* 减去padding的高度 */
  overflow-y: auto;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 20px;
}

.demo-section {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: #fff;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

h2 {
  color: #303133;
  margin: 0 0 15px 0;
  font-size: 24px;
  font-weight: 600;
}

h3 {
  color: #409EFF;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.demo-content {
  margin-top: 10px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 4px;
}

/* 自定义滚动条样式 */
.communication-demo::-webkit-scrollbar {
  width: 6px;
}

.communication-demo::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
}

.communication-demo::-webkit-scrollbar-track {
  background: #f5f7fa;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .communication-demo {
    padding: 10px;
    height: calc(100vh - 20px);
  }

  .demo-section {
    padding: 15px;
    margin-bottom: 15px;
  }

  .demo-content {
    padding: 10px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 14px;
  }
}
</style> 